<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-card{
            width: 80%;
            margin: 50px auto;
        }
    </style>
</head>
<body>

<!-- 你的HTML代码 -->
<div class="layui-card">
    <div class="layui-card-header">编辑内容</div>
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="linshareform">
            <div class="layui-form-item">
                <label class="layui-form-label">分享类型</label>
                <div class="layui-input-block">
                    <select id="sharetype" name="sharetype"  lay-filter="sharetype">
                        <option value=""></option>
                        <option value="1" th:selected="${sharetype == 1}">0元搞定全屋设计</option>
                        <option value="2" th:selected="${sharetype == 2}">装修预算</option>
                        <option value="3" th:selected="${sharetype == 3}">样板房免费接驾到店</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input id="title" type="text" name="title" th:value="${title}"   lay-verify="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分享链接</label>
                <div class="layui-input-block">
                    <input id="url" type="text" name="url"  th:value="${url}"  lay-verify="url" placeholder="请输入分享链接" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">分享内容</label>
                <div class="layui-input-block">
                    <textarea id="content" name="content" th:text="${content}" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">上半图</label>
                <div class="layui-input-block">
                    <img id="upimg" th:src="${topimg}">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">下半图</label>
                <div class="layui-input-block">
                    <img id="downimg" th:src="${bottomimg}">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">选择背景色</label>
                <div class="layui-input-block">
                    <div id="bgcolor"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="linsharesubmit">立即提交</button>
                    <button type="reset" id="reset" class="layui-btn layui-btn-primary" style="display: none">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script th:inline="javascript">


    /*<![CDATA[*/

    let backgroundcolor = [[${bgcolor}]];

    /*]]>*/


    //一般直接写在一个js文件中
    layui.use(['layer', 'form','upload','colorpicker'], function(){
        let layer = layui.layer,
            $ = layui.$
            , colorpicker = layui.colorpicker
            , upload = layui.upload
            , form = layui.form;

        form.render();

        function getCookie(name) {
            let arr = document.cookie.split('; ');
            for (let i = 0; i < arr.length; i++) {
                let arr2 = arr[i].split('=');
                if (trim(arr2[0]) === name) {
                    return unescape(trim(arr2[1]));
                }
            }
            return '';
        }

        function trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }

        function getUrlParam(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            let r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

        let id = getUrlParam('id');

        form.on('select(sharetype)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
        });

        let bgcolor = '#'+backgroundcolor;
        colorpicker.render({
            elem: '#bgcolor',  //绑定元素
            color:bgcolor,
            done: function(color){
                console.log(color);
                if(color.length > 6){
                    bgcolor = color.substring(1,color.length);
                }else{
                    bgcolor = color;
                }

                //譬如你可以在回调中把得到的 color 赋值给表单
            }
        });

        form.verify({
            title: function(value){
                if(value == ''){
                    return '标题不能为空';
                }
            }
            ,url: function(value){
                if(value == ''){
                    return '链接不能为空';
                }
            }
        });
        let upimg = $('#upimg')[0].src;
        let downimg = $('#downimg')[0].src;

        upload.render({
            elem: '#upimg'
            , url: '/layuiupload'
            , accept: 'images'
            , field: 'file'//后台接收参数名
            ,auto:false
            , acceptMime: 'image/*'
            , before: function(obj) {
                layer.load();
            }
            ,choose: function(obj){  //上传前选择回调方法
                let flag = true;
                obj.preview(function(index, file, result){

                    const img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width == 750){
                            $('#upimg').attr('src', result);
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小宽度必须是750像素");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            , done: function (res) {
                layer.closeAll('loading');
                upimg = res.data.src;
            }
        });

        upload.render({
            elem: '#downimg'
            , url: '/layuiupload'
            , accept: 'images'
            , field: 'file'//后台接收参数名
            ,auto:false
            , acceptMime: 'image/*'
            , before: function(obj) {
                layer.load();
            }
            ,choose: function(obj){  //上传前选择回调方法
                let flag = true;
                obj.preview(function(index, file, result){
                    const img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width == 750){
                            $('#downimg').attr('src', result);
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            layer.msg("您上传的小图大小宽度必须是750像素");
                            return false;
                        }
                    }
                    return flag;
                });
            }
            , done: function (res) {
                layer.closeAll('loading');
                downimg = res.data.src;
            }
        });
        
        //监听提交
        form.on('submit(linsharesubmit)', function(data){
            const field = data.field;
            field.userId = getCookie("telphone");
            field.upimg = upimg;
            field.downimg = downimg;
            field.bgcolor = bgcolor;
            field.id = id;
            $.post('/api/add_linsharecontent',field,function (resp) {
                if(resp.code === '0'){
                    layer.msg(resp.msg);
                    $('#reset').click();
                    parent.layui.table.reload('linshare_table'); //重载表格

                    //关闭自身弹窗
                    const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }else{
                    layer.msg(resp.msg);
                }
            })
            return false;
        });
    });
</script>
</body>
</html>